<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>问卷管理 - 图腾生命医学</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/apps/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/apps/css/fontawesome-free-6.4.0-web/css/all.css">
    <!-- AdminLTE CSS -->
    <link rel="stylesheet" href="/apps/css/adminlte.min.css">
    <!-- QRCode.js -->
    <script src="/apps/js/qrcode.min.js"></script>
    <script src="/apps/js/baidu-tongji-mtx.js"></script>
    <style>
        .badge { font-size: 100%; }
        .qrcode-modal .modal-body {
            text-align: center;
            padding: 20px;
        }
        #qrcodeCanvas {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
        }
        .survey-url {
            word-break: break-all;
            margin-top: 10px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body class="hold-transition">
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{{title}}</h3>
                            <div class="card-tools">
                                <a href="/apps/admin/surveys/new" class="btn btn-primary btn-sm">
                                    创建新问卷
                                </a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>问卷代码</th>
                                            <th>问卷名称</th>
                                            <th>适用说明</th>
                                            <th>问卷状态</th>
                                            <th>更新时间</th>
                                            <th width="180">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#each surveys}}
                                        <tr>
                                            <td>{{program_code}}</td>
                                            <td>
                                                {{title}}
                                                <br>
                                                <small style="color:grey;">
                                                    用户条件：{{conditions}}
                                                    问卷来源：{{source}}
                                                </small>
                                            </td>
                                            <td>
                                                {{description}}
                                                <br>
                                            </td>
                                            <td>
                                                <span class="badge {{#if (eq status 'OPEN')}}badge-success{{else}}badge-secondary{{/if}}">
                                                    {{#if (eq status 'OPEN')}}开放访问{{else}}已关闭{{/if}}
                                                </span>
                                            </td>
                                            <td>{{updated_at}}</td>
                                            <td>
                                                <div class="btn-group">
                                                    <a href="/apps/admin/surveys/edit/{{program_code}}" class="btn btn-info btn-sm">编辑</a>
                                                    <a href="/apps/admin/surveys/results/{{program_code}}" class="btn btn-success btn-sm">结果</a>
                                                    <button type="button" 
                                                            class="btn btn-primary btn-sm show-qrcode" 
                                                            title="显示二维码"
                                                            data-survey-code="{{program_code}}"
                                                            data-survey-name="{{title}}"
                                                            data-survey-url="https://totemlife.cn/apps/loyalty/survey/{{program_code}}">
                                                        <i class="fas fa-qrcode"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        {{/each}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 二维码模态框 -->
    <div class="modal fade qrcode-modal" id="qrcodeModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">问卷二维码</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h6 id="qrcodeTitle"></h6>
                    <div id="qrcodeCanvas"></div>
                    <div class="survey-url mt-3">
                        <small class="text-muted">问卷链接：</small>
                        <span id="qrcodeUrl"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="downloadQRCode">
                        <i class="fas fa-download"></i> 下载二维码
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="/apps/js/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="/apps/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE JS -->
    <script src="/apps/js/adminlte.min.js"></script>

    <script>
    $(document).ready(function() {
        // 初始化模态窗口
        const qrcodeModal = new bootstrap.Modal(document.getElementById('qrcodeModal'));

        // 复制链接功能
        $('.survey-url').click(function() {
            const url = $('#qrcodeUrl').text();
            navigator.clipboard.writeText(url).then(function() {
                alert('链接已复制到剪贴板');
            }).catch(function(err) {
                console.error('复制失败:', err);
                const tempInput = document.createElement('input');
                tempInput.value = url;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);
                alert('链接已复制到剪贴板');
            });
        });

        // 显示二维码功能
        $('.show-qrcode').click(function() {
            const surveyCode = $(this).data('survey-code');
            const surveyName = $(this).data('survey-name');
            const surveyUrl = $(this).data('survey-url');

            $('#qrcodeTitle').text(surveyName);
            $('#qrcodeUrl').text(surveyUrl);

            $('#qrcodeCanvas').empty();

            try {
                setTimeout(() => {
                    new QRCode('qrcodeCanvas', {
                        text: surveyUrl,
                        width: 256,
                        height: 256,
                        colorDark: "#000000",
                        colorLight: "#ffffff",
                        correctLevel: QRCode.CorrectLevel.H
                    });

                    qrcodeModal.show();
                }, 100);
            } catch (error) {
                console.error('生成二维码失败:', error);
                $('#qrcodeCanvas').html(`
                    <div class="alert alert-warning">
                        二维码生成失败，请直接复制链接使用：<br>
                        <a href="${surveyUrl}" target="_blank">${surveyUrl}</a>
                    </div>
                `);
                qrcodeModal.show();
            }
        });

        // 关闭模态窗口的处理
        document.getElementById('qrcodeModal').addEventListener('hidden.bs.modal', function () {
            $('#qrcodeCanvas').empty();
        });

        // 下载二维码功能
        $('#downloadQRCode').click(function() {
            try {
                const canvas = document.querySelector("#qrcodeCanvas canvas");
                const surveyCode = $('.show-qrcode:first').data('survey-code');

                if (canvas) {
                    const link = document.createElement('a');
                    link.download = `survey-${surveyCode}-qrcode.png`;
                    link.href = canvas.toDataURL("image/png");
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                } else {
                    alert('二维码图片未准备好，请稍后再试');
                }
            } catch (error) {
                console.error('下载二维码失败:', error);
                alert('下载二维码失败，请稍后再试');
            }
        });
    });
    </script>
</body>
</html> 
